<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>响应式原理</title>
	<link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
	
	/* 响应式
		
		1. 什么是响应式
			当我们修改/读取数据的时候，会产生一定的响应，再vue中最为直观的是修改数据之后，页面上的数据也会随之发生改变。

		2. 如何实现响应式（es5）
			通过 Object.defineProperty api实现响应式原理
	*/ 


	let data = {
		name: '李白',
		age: 23
	}


	let name;
	Object.defineProperty(data, 'name', {
		enumerable: true,	// 是否可以枚举
		// writable: true, 	// 是否可写，不能和set共存
		get: ()=>{	// 读取拦截
			return name;
		},
		set: (newValue)=>{	// 赋值拦截
			name = newValue;
		}
	})


	/* 总结

		1. 存在的问题
			响应式的数据需要使用一个全局变量来作为set 和 get 之间的桥梁，这样存在极大的问题，我们将一个不希望外部访问的变量暴漏了出来，这样做十分不安全。

		2. 解决思路
			使用闭包的原理对这个 响应式的操作以进一步的封装

	*/

</script>
</html>